<template>
  <div class="home">
    <van-nav-bar>
      <template #right>
        <van-search
          placeholder="输入咖啡饮品"
          shape="round"
          @focus="toSearch"
        />
      </template>
    </van-nav-bar>

    <van-swipe @change="onChange" :autoplay="2000" lazy-render>
      <van-swipe-item
        v-for="(val, index) in banner"
        :key="index"
        @click="intoDetail(val.pid)"
      >
        <img class="imgCover" :src="val.bannerImg" />
      </van-swipe-item>
      <template #indicator>
        <div class="customIndicator">
          <div
            class="indicator-item"
            :class="{ active: current === i }"
            v-for="(v, i) in banner.length"
            :key="i"
          ></div>
        </div>
      </template>
    </van-swipe>

    <div class="hot">
      <h3>热卖推荐</h3>
      <van-row gutter="10">
        <van-col
          span="12"
          v-for="item in hot"
          :key="item.pid"
          @click="intoDetail(item.pid)"
        >
          <div class="imgBox">
            <img :src="item.smallImg" />
          </div>
          <div class="description">
            <div class="goodsName">
              <p>{{ item.name }}</p>
              <p>{{ item.enname }}</p>
            </div>
            <div class="money">&yen;{{ item.price }}</div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import "../assets/less/home.less";
export default {
  name: "Home",
  data() {
    return {
      current: 0,
      banner: [],
      hot: [],
    };
  },
  created() {
    this.getBanner();
    this.getHot();
  },
  methods: {
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    intoDetail(pid) {
      // console.log(pid);
      return this.$router.push({
        name: "Details",
        params: { pid },
      });
    },
    onChange(i) {
      this.current = i;
    },
    getBanner() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "GET",
        url: "/banner",
        params: {
          appkey: this.appkey,
        },
      })
        .then((res) => {
          // console.log('res getBannerData ==> ', res);
          this.$toast.clear();

          if (res.data.code === 300) {
            this.banner = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getHot() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          // console.log('res getHot ==> ', res);
          this.$toast.clear();

          if (res.data.code === 500) {
            this.hot = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>
